<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

    <title>BerkeleyMapper</title>

    <link rel=StyleSheet href="css/berkeleymapper.css">
    <link rel=StyleSheet href="css/jquery-ui-1.8.17.custom.css">

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.12&sensor=true&libraries=drawing,geometry"></script>
    <script type="text/javascript" src="js/keydragzoom.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/jquery.url.js"></script>
    <script type="text/javascript" src="js/jquery.parsequery.min.js"></script>
    <script type="text/javascript" src="js/jquery.cookie.js"></script>
    <script type="text/javascript" src="js/jquery.splitter.js"></script>
    <script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
    <script type="text/javascript" src="js/berkeleymapper.js"></script>
    <script type="text/javascript" src="js/drawingManager.js"></script>
    <script type="text/javascript" src="js/markerclusterer.js"></script>
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/styledmarker/src/StyledMarker.js"></script>
    <script type="text/javascript" src="js/georef.js"></script>
    <script type="text/javascript" src="js/georef-utils.js"></script>

</head>

<body onload="initialize()">

<div id="bigContainer">

    <div id="topContainer">

        <div id="leftContainer">
            <div id="leftContent">

                <div id="loadingMsg">Loading Application ... </div>

                <a href="http://code.google.com/p/berkeleymapper" border=0><img width=150 src='img/bm_logo.gif'></a><br>

                <a href="http://code.google.com/p/berkeleymapper" target="_blank">BerkeleyMapper Information</a><br>

                <a href='#' onclick='toggleControls();'>Toggle map controls</a> |
                <a href='#' onclick="mapPrint();">Print</a>

                <div id="addressControl">
                    <input id="address" type="textbox" value="">
                    <input id="addressbutton" type="button" value="Geocode" onclick="codeAddress(document.getElementById('address').value)">
                </div>

                <div id="displayOptions">
                    <b>Display: </b>
                    <select id=pointDisplayValue onchange="pointDisplay(this.value);">
                        <option value="markerclusteron">MarkerClusterer</option>
                        <option value="markers">Placemarks</option>
                        <option value="pointMarkers">Point Markers</option>
                        <option value="pointMarkersBlack">Point Markers - Black</option>
                        <option value="pointMarkersRed">Point Markers - Red</option>
                        <option value="none">None</option>
                    </select>
                </div>

                <div id="styleOptions">
                    <br><input type=checkbox id=styleOptionErrorRadius checked onclick="errorCheckBox();"/>Show Error Radius
                </div>

                <div style="float:clear;"></div>

                <div id="layers"></div>

                <div style="float:clear;"></div>

                <div id="myColors"></div>

                <div style="float:clear;"></div>

                <p></p><br>

                <div id="logos"></div>

                <p></p><br>

                <div id="download">
                    <a href="#" onclick='downloadAll();'>Download All (tab-delimited with XLS extension)</a><br>
                    <a href="#" onclick='downloadSpatial();'>Download Subset</a><br>
                    <a href="#" onclick='downloadKML();'>Open in Google Earth</a>
                </div>

            </div>
        </div>

        <div id="rightContainer">

            <div id="mapContainer">
                <div id="map"></div>
            </div>
        </div>
    </div>

    <div id="bottomContainer"></div>

</div>

</body>

</html>
